<template>
    <template v-for="item in data" :key="item.key">
        <template v-if="item.children && item.children.length">
            <a-sub-menu :key="item.key">
                <template #title>
                    <component :is="item.icon"></component>
                    <span>
                        {{ item.title }}
                    </span>
                </template>
                <Menu :data="item.children"></Menu>
            </a-sub-menu>
        </template>
        <template v-else>
            <a-menu-item :key="item.key">
                <component :is="item.icon"></component>
                <span>{{ item.title }}</span>
            </a-menu-item>
        </template>
    </template>
</template>

<script lang="ts" setup>
    interface Props {
        data: Array<MenuDataItem>;
    }
    defineOptions({
        name: "Menu"
    });
    defineProps<Props>();
</script>
